<template>
  <div class="form-add bg-white">
    <div class="form-container" style="padding-top:40px">
      <div class="form-content" style="width: 1000px">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="标题" class="editor-wrap" prop="tip">
            <el-input v-model="form.text" :maxlength="128"> </el-input>
          </el-form-item>
          <el-form-item label="富文本" class="editor-wrap">
            <div style="margin-bottom: 10px">
              <Toolbar style="border: 1px solid #ccc;border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
              <Editor style="height: 300px; overflow-y: hidden;border: 1px solid #ccc;border-top:none;" v-model="form.context"
                :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
            </div>
          </el-form-item>
        </el-form>
        <div class="text-right">
          <el-popconfirm title="确定保存吗？" @confirm="sure">
            <el-button type="primary" slot="reference">保存</el-button>
          </el-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import routeMap from '../../models/route-map';
import { deepClone } from '../../script/config/common'

export default {
  name: 'emptyCache',
  props: [],
  components: { Editor, Toolbar },
  data() {
    return {
      form: {
        text: '标题',
        context: '<h1>富文本内容<h1>',
      },
      rules: {
      },
      editor: null,
      toolbarConfig: {},
      editorConfig: { placeholder: '' },
      mode: 'default',
      canSave: false,
    }
  },
  mounted() {
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    async sure() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.$message.success('保存成功');
          } catch (e) {
            this.$message.warning(e && e.message || '保存失败');
          }
        } else {
          return false;
        }
      })
    },
  }
}
</script>
<style lang="scss">
</style>
